<template>
  <div class="role_manage_details">

    <!--面包屑导航模板-->
    <el-breadcrumb class="topNav" separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{path:'/sys_management/role_manage'}">系统管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{path:'/sys_management/role_manage'}">角色管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色详情</el-breadcrumb-item>
    </el-breadcrumb>

    <!--标题模板-->
    <el-row>
      <el-col :span="24"><div class="title-template">角色详情</div></el-col>
    </el-row>


    <div class="info-template-content">
      <el-row class="item-row">
        <el-col :span="3" style="color: #666">状态</el-col>
        <el-col :span="19" style="color: #333">{{state}}</el-col>
      </el-row>
      <el-row class="item-row">
        <el-col :span="3" style="color: #666">角色名</el-col>
        <el-col :span="19" style="color: #333">{{role_name}}</el-col>
      </el-row>
      <el-row class="item-row">
        <el-col :span="3" style="color: #666">角色创建时间</el-col>
        <el-col :span="19" style="color: #333">{{creat_date}}</el-col>
      </el-row>
      <el-row class="item-row" >
        <el-col :span="3" style="color: #666">角色编码</el-col>
        <el-col :span="19" style="color: #333">{{role_num}}</el-col>
      </el-row>
      <el-row class="item-row">
        <el-col :span="3" style="color: #666">权限功能</el-col>
        <el-col :span="19" style="color: #333">{{role_vaildate}}</el-col>
      </el-row>
    </div>

  </div>
</template>

<script>

  export default {
    data(){
      return{
        labelPosition:'left',
        role_name:'',
        state:'',
        creat_date:'',
        role_num:'',
        role_vaildate:'',
        checkList:[],
        checkAll:false,
        isIndeterminate: true

      }
    },
    methods:{
      backData(){
        var  data = this.$route.query.row;

        console.log(data)
        this.role_name= data.name;
        this.creat_date=data.date;
        this.role_num='';
        this.role_vaildate='';
        this.state=data.state;


      }
    },
    created(){
      this.backData()
    }
  }
</script>

<style scoped>
  .role_manage_details .topNav{
    margin-left: 30px;
    margin-bottom: 20px;
  }
  .role_manage_details .title-template{
    height: 60px;
    line-height: 60px;
    font-size: 18px;
    padding-left: 30px;
    margin-bottom: 10px;
    color: #333333;
    background: #ffffff;
  }

  .info-template-content{
    background: #ffffff;
    padding: 50px;
  }
  .item-row{
    margin-bottom: 50px;
    font-size: 16px;
  }

</style>

